import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gameplay_flutter/lib_chat/chat/index.dart';
import 'package:gameplay_flutter/lib_im/index.dart';
import 'package:gameplay_flutter/m_room/constants/room_assets.dart';

import '../../lib_runtime/extension/string_extension/string_text.dart';
import '../../m_me/constants/me_assets_constants.dart';
import '../../m_me/user_details_page/custom_tab_bar_indicator.dart';
import '../../resource/language/generated/l10n.dart';

class RoomGift extends StatefulWidget {
  const RoomGift({Key? key}) : super(key: key);

  @override
  _RoomGiftState createState() => _RoomGiftState();
}

class _RoomGiftState extends State<RoomGift>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  final _tabs = [
    "Gift1",
    "Gift2",
    "Gift3",
    "Gift4",
  ];

  final _numbers = [1, 7, 17, 77, 777];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 4, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 400.h,
      child: Column(
        children: [
          _giveTo(),
          SizedBox(height: 6.h),
          Expanded(
            child: Stack(
              alignment: Alignment.bottomCenter,
              children: [
                _giftList(),
                Container(
                  width: double.infinity,
                  height: 100.h,
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Color(0x00000000),
                        Color(0x6E241235),
                        Color(0x96241235),
                      ],
                    ),
                  ),
                ),
                _giftBottom(),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _giveTo() {
    return Container(
      height: 44.h,
      decoration: BoxDecoration(
        color: const Color(0xFF241235),
        borderRadius: BorderRadius.circular(8.0.r),
      ),
      margin: EdgeInsetsDirectional.symmetric(horizontal: 15.w),
      padding: EdgeInsetsDirectional.symmetric(horizontal: 12.w),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          "Give To".text(
            color: const Color(0xFFFFFFFF),
            fontSize: 18.sp,
            weight: TextFontWeight.regular,
          ),
          SizedBox(width: 4.w),
          _giveToMenberList(),
          Image.asset(
            RoomAssets.getGiftToMenberArrow(context),
            width: 12.w,
            height: 12.h,
          ),
          SizedBox(width: 12.w),
          Container(
            width: 40.w,
            height: 20.h,
            alignment: AlignmentDirectional.centerStart,
            padding: EdgeInsets.symmetric(horizontal: 7.w),
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(RoomAssets.roomMicAll),
                fit: BoxFit.fill,
              ),
            ),
            child: "All".text(
              color: const Color(0xFFFFFFFF),
              fontSize: 11.sp,
              weight: TextFontWeight.medium,
            ),
          ),
        ],
      ),
    );
  }

  /// 赠送给谁人员列表
  Widget _giveToMenberList() {
    return Expanded(
      child: ListView.builder(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        physics: const ClampingScrollPhysics(),
        itemCount: 8,
        itemBuilder: (context, index) {
          return _giveToMenberItem();
        },
      ),
    );
  }

  /// 赠给谁人员项
  Widget _giveToMenberItem() {
    return Padding(
      padding: EdgeInsetsDirectional.only(end: 5.w),
      child: Stack(
        alignment: Alignment.center,
        children: [
          CircleAvatar(
            backgroundColor: Color(0xFFFFFFFF),
            radius: 14.r,
            backgroundImage:
                CachedNetworkImageProvider('https://picsum.photos/200/300'),
            // 使用 NetworkImage
            child: true
                ? Image.asset(MeAssetsConstants.iconEmpty) // 如果没有图片，显示加载动画
                : null,
          ),
          Image.asset(
            RoomAssets.roomSelectIcon,
            width: 34.w,
            height: 34.h,
          ),
        ],
      ),
    );
  }

  ///  礼物列表栏
  Widget _giftList() {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
        color: const Color(0xFF241235),
        borderRadius: BorderRadiusDirectional.only(
            topStart: Radius.circular(18.0.r), topEnd: Radius.circular(18.0.r)),
      ),
      padding: EdgeInsetsDirectional.only(top: 18.h),
      child: Column(children: [
        Container(
          height: 27.h,
          child: TabBar(
            controller: _tabController,
            isScrollable: true,
            physics: const ClampingScrollPhysics(),
            dividerColor: Colors.transparent,
            tabAlignment: TabAlignment.start,
            indicatorSize: TabBarIndicatorSize.tab,
            indicator: const CustomTabBarIndicator(),
            labelColor: const Color(0xFFFFFFFF),
            unselectedLabelColor: const Color(0xFFA397DE),
            labelStyle: TextStyle(
              color: const Color(0xFFA397DE),
              fontSize: 16.sp,
              fontWeight: FontWeight.w400,
            ),
            tabs: _tabs.map((tab) => Tab(text: tab)).toList(),
          ),
        ),
        Expanded(
          child: TabBarView(
            controller: _tabController,
            physics: const ClampingScrollPhysics(),
            children: [
              _giftListItem(),
              _giftListItem(),
              _giftListItem(),
              _giftListItem(),
            ],
          ),
        ),
      ]),
    );
  }

  /// 单个类型的礼物列表
  Widget _giftListItem() {
    return GridView.builder(
        padding: EdgeInsetsDirectional.only(top: 22.h, start: 9.w, end: 9.w),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          crossAxisSpacing: 12.w,
          childAspectRatio: 0.83,
        ),
        itemCount: 20,
        itemBuilder: (context, index) {
          return _giftItem();
        });
  }

  /// 单个礼物项
  Widget _giftItem() {
    return Container(
      height: 90.h,
      decoration: BoxDecoration(
        border: Border.all(color: const Color(0xFFCEC3FF), width: 1.w),
        borderRadius: BorderRadius.circular(10.0.r),
      ),
      child: Column(
        children: [
          Image.network(
            "https://picsum.photos/200/300",
            width: 64.w,
            height: 64.h,
          ),
          SizedBox(height: 3.h),
          Row(mainAxisAlignment: MainAxisAlignment.center, children: [
            Image.asset(RoomAssets.roomGiftPriceIcon,
                width: 12.w, height: 12.h),
            SizedBox(width: 2.w),
            "99999".text(
              color: const Color(0xFFFFFFFF),
              fontSize: 12.sp,
              weight: TextFontWeight.regular,
            ),
          ])
        ],
      ),
    );
  }

  /// 礼物底部栏
  Widget _giftBottom() {
    return Padding(
      padding: EdgeInsetsDirectional.only(bottom: 34.h, start: 15.w, end: 15.w),
      child: Row(
        children: [
          _recharge(),
          const Spacer(),
          _sendGift(),
        ],
      ),
    );
  }

  /// 充值按钮
  Widget _recharge() {
    return Container(
      padding: EdgeInsetsDirectional.symmetric(horizontal: 7.w),
      decoration: BoxDecoration(
        color: const Color(0xA6000000),
        borderRadius: BorderRadius.circular(40.0.r),
      ),
      height: 37.h,
      child: Row(
        children: [
          Image.asset(
            RoomAssets.roomGiftPriceIcon,
            width: 17.w,
            height: 17.h,
          ),
          SizedBox(
            width: 2.w,
          ),
          "99999".text(
            color: const Color(0xFFFFFFFF),
            fontSize: 20.sp,
            weight: TextFontWeight.medium,
          ),
          SizedBox(
            width: 8.w,
          ),
          Container(
            height: 26.h,
            alignment: Alignment.center,
            padding: EdgeInsetsDirectional.symmetric(horizontal: 7.w),
            decoration: BoxDecoration(
              color: const Color(0xFF8A72FE),
              borderRadius: BorderRadius.circular(34.0.r),
            ),
            child: "Recharge".text(
              color: const Color(0xFFFFFFFF),
              fontSize: 11.sp,
              weight: TextFontWeight.medium,
            ),
          ),
        ],
      ),
    );
  }

  Widget _sendGift() {
    return Container(
      height: 36.8.h,
      decoration: BoxDecoration(
        color: const Color(0xA6000000),
        borderRadius: BorderRadius.circular(40.0.r),
        border: Border.all(color: const Color(0xFFFFFFFF), width: 0.6.w),
      ),
      child: Row(
        children: [
          CustomPopup(
            showArrow: false,
            contentPadding: EdgeInsets.zero,
            backgroundColor: Colors.transparent,
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: _numbers.map(_counter).toList(),
            ).clipRRect(5),
            barrierColor: Colors.transparent,
            child: Container(
              height: double.infinity,
              padding: EdgeInsetsDirectional.only(start: 12.w, end: 7.w),
              child: Row(
                children: [
                  const Text(
                    '1',
                    style: TextStyle(
                      color: Color(0xFFFFFFFF),
                      fontWeight: FontWeight.w500,
                      fontSize: 18,
                    ),
                  ),
                  SizedBox(width: 4.w),
                  Icon(Icons.keyboard_arrow_up,
                      color: const Color(0xFFFFFFFF), size: 15.w),
                ],
              ),
            ),
          ),
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            child: Container(
              height: double.infinity,
              alignment: Alignment.center,
              padding: EdgeInsetsDirectional.only(start: 7.w, end: 7.w),
              decoration: BoxDecoration(
                borderRadius: BorderRadiusDirectional.horizontal(
                    end: Radius.circular(40.0.r)),
                gradient: const LinearGradient(
                  colors: [Color(0xFF8A72FE), Color(0xFF6549EC)],
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                ),
              ),
              child: Text(
                T.current.c_send,
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 14.sp,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _counter(int value) {
    final last = value == _numbers.last;
    return GestureDetector(
      onTap: () {
        Navigator.of(context).pop();
      },
      behavior: HitTestBehavior.opaque,
      child: Container(
        width: 50,
        padding: const EdgeInsets.symmetric(vertical: 10),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: const Color(0xA6000000),
          border: !last
              ? Border(
                  bottom: BorderSide(
                    color: const Color(0xFF575757),
                    width: 0.6.w,
                  ),
                )
              : null,
        ),
        child: Text(
          '$value',
          style: TextStyle(
              fontWeight: FontWeight.w500, color: const Color(0xFFffffff)),
        ),
      ),
    );
  }
}
